<template>
  <div>
    <div class="queryBox">
      <div class="row">
        <div class="left">
          <el-icon>
            <Search />
          </el-icon>
          <span> 筛选搜索 </span>
        </div>
        <div class="right">
          <el-button @click="reset">重置</el-button>
          <el-button type="primary" @click="searchHandle">搜索</el-button>
        </div>
      </div>
      <div class="row">
        <span>品牌名称：</span>
        <el-input placeholder="商品名称" v-model="params.productName" />
        <span>推荐状态：</span>
        <el-select placeholder="全部" clearable v-model="value">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            @change="params.recommendStatus = item.value"
          >
          </el-option>
        </el-select>
      </div>
    </div>
  </div>
  <div class="editUser">
    <div class="editUserLeft">
      <el-icon>
        <Tickets />
      </el-icon>
      <span>数据列表</span>
    </div>
    <el-button @click="choseFn">选择品牌</el-button>
  </div>
  <el-table
    :data="list"
    table-layout="auto"
    @selection-change="selectChange"
    cell-class-name="align-c"
    border
    select-on-indeterminate
  >
    <el-table-column align="center" type="selection"> </el-table-column>
    <el-table-column align="center" label="编号" prop="id"></el-table-column>
    <el-table-column
      align="center"
      label="商品名称"
      prop="productName"
    ></el-table-column>
    <el-table-column align="center" label="是否推荐">
      <template #default="{ row }">
        <el-switch
          v-model="row.recommendStatus"
          :active-value="1"
          :inactive-value="0"
          @change="switchStatus(row)"
        ></el-switch> </template
    ></el-table-column>
    <el-table-column align="center" label="排序" prop="sort"> </el-table-column>
    <el-table-column align="center" label="状态">
      <template #default="{ row }">
        {{ row.recommendStatus === 1 ? "推荐中" : "未推荐" }}
      </template>
    </el-table-column>
    <el-table-column align="center" label="操作">
      <template #default="{ row }">
        <el-button type="primary" text @click="ranking(row)"
          >设置排序</el-button
        >
        <el-button type="primary" text @click="del(row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="bottomLeft">
    <el-select placeholder="批量操作" v-model="valueB" clearable>
      <el-option
        v-for="item in optionsB"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <el-button type="primary" @click="submitFn">确定</el-button>
  </div>
  <div class="page">
    <ElConfigProvider :locale="zhCn">
      <el-pagination
        v-model:current-page="params.pageNum"
        v-model:page-size="params.pageSize"
        :page-sizes="[5, 10, 20, 50, 100]"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="pageChangeHandle"
        @current-change="pageSizeChangeHandle"
      />
    </ElConfigProvider>
  </div>
  <HotProductRanking
    :show="showRanking"
    @hide="hideRanking"
    :id="rankingId"
    :sort="oldSort"
  />
  <ChoseHotProduct :show="showChose" @hide="hideChose" />
</template>
<script setup lang="ts">
import { Search } from "@element-plus/icons-vue";
import {
  ElConfigProvider,
  ElMessage,
  ElMessageBox,
  ElTable,
} from "element-plus";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { ref } from "vue";
import {
  RecommendProductListApi,
  deleteRecommendProductApi,
  updateRecommendProductRecommendStatusApi,
} from "./api";
import useTable from "@/hooks/useTable";
import HotProductRanking from "./components/HotProductRanking.vue";
import ChoseHotProduct from "./components/ChoseHotProduct.vue";

//搜索框
const value = ref("");
//批量操作
const valueB = ref("");
// const total = ref(0);
// const list = ref<IState[]>([]);
//删除的id数组
const delArr = ref<number[]>([]);
//显示排序框
const showRanking = ref(false);
//排序对象的id
const rankingId = ref(0);
//原先的排序值
const oldSort = ref(0);
//显示选择品牌
const showChose = ref(false);
const params = ref<IProductParam>({
  productName: "",
  pageNum: 1,
  pageSize: 5,
  recommendStatus: value ? value : 1,
});
const options = [
  {
    value: 0,
    label: "未推荐",
  },
  {
    value: 1,
    label: "推荐中",
  },
];
const optionsB = [
  {
    value: "设为推荐",
    label: "设为推荐",
  },
  {
    value: "取消推荐",
    label: "取消推荐",
  },
  {
    value: "删除",
    label: "删除",
  },
];
const { list, total, searchHandle, pageChangeHandle, pageSizeChangeHandle } =
  useTable(RecommendProductListApi, params.value);

//重置
const reset = () => {
  value.value = "";
  params.value.productName = "";
  searchHandle();
};
//单个删除
const del = (id: number) => {
  ElMessageBox.confirm("确定要删除吗？", "删除", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      delArr.value = [];
      delArr.value.push(id);
      deleteRecommendProductApi(delArr.value).then((res) => {
        if (res.code === 200) {
          delArr.value = [];
          searchHandle();
          ElMessage.success("删除成功");
        }
      });
    })
    .catch(() => {});
};

//显示排序框的方法
const ranking = (row: IRecommendProductListList) => {
  console.log(row);

  rankingId.value = row.id as number;
  oldSort.value = row.sort as number;
  showRanking.value = true;
};
//隐藏排序框的方法
const hideRanking = (reload?: Boolean) => {
  showRanking.value = false;
  rankingId.value = 0;
  if (reload) searchHandle();
};
//单个推荐修改
const switchStatus = (row: IRecommendProductListList) => {
  ElMessageBox.confirm("确定要修改吗？", "修改", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      updateRecommendProductRecommendStatusApi(
        [row.id as number],
        row.recommendStatus as number
      ).then((res) => {
        if (res.code === 200) {
          ElMessage.success("修改成功");
          searchHandle();
        } else {
          row.recommendStatus = row.recommendStatus === 1 ? 1 : 0;
        }
      });
    })
    .catch(() => {
      ElMessage.success("取消成功");
      row.recommendStatus = row.recommendStatus === 1 ? 1 : 0;
      searchHandle();
    });
};
//隐藏选择品牌
const hideChose = (reload?: boolean) => {
  showChose.value = false;
  if (reload) searchHandle();
};
//显示选择品牌
const choseFn = () => {
  showChose.value = true;
};

//单独一个取消选择
const selectChange = (selection: IRecommendProductListList[]) => {
  console.log("selection:", selection);
  for (let i = 0; i < selection.length; i++) {
    delArr.value = selection.map((item) => item.id as number);
  }
};
//批量操作的确定
const submitFn = () => {
  if (valueB.value === "删除") {
    ElMessageBox.confirm("确定要删除吗？", "删除", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        if (delArr.value.length === 0) {
          ElMessage.warning("请至少选择一条");
        } else {
          deleteRecommendProductApi(delArr.value).then((res) => {
            if (res.code === 200) {
              ElMessage.success("删除成功");
              searchHandle();
              delArr.value = [];
            }
          });
        }
      })
      .catch(() => {});
  } else if (valueB.value === "设为推荐") {
    ElMessageBox.confirm("确定要修改吗？", "修改", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        if (delArr.value.length === 0) {
          ElMessage.warning("请至少选择一条");
        } else {
          updateRecommendProductRecommendStatusApi(delArr.value, 1).then(
            (res) => {
              if (res.code === 200) {
                ElMessage.success("设置成功");
                searchHandle();
                delArr.value = [];
              }
            }
          );
        }
      })
      .catch(() => {});
  } else if (valueB.value === "取消推荐") {
    ElMessageBox.confirm("确定要修改吗？", "修改", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        if (delArr.value.length === 0) {
          ElMessage.warning("请至少选择一条");
        } else {
          updateRecommendProductRecommendStatusApi(delArr.value, 0).then(
            (res) => {
              if (res.code === 200) {
                ElMessage.success("设置成功");
                searchHandle();
                delArr.value = [];
              }
            }
          );
        }
      })
      .catch(() => {});
  }
};
</script>

<style lang="less" scoped>
:deep(.align-c) {
  .cell {
    text-align: center;
  }
}

.page {
  display: flex;
  flex-direction: row-reverse;
}
.queryBox {
  box-shadow: 0 0 4px 2px #ccc;
  border-radius: 5px;
  padding: 20px;
  margin-bottom: 20px;

  .row {
    display: flex;
    padding: 10px 0;
    width: 100%;

    &:first-child {
      justify-content: space-between;
      align-items: center;
    }

    &:last-child {
      width: 400px;
      align-items: center;

      span {
        font-size: 12px;
        width: 150px;
      }
    }
  }
}

.editUser {
  display: flex;
  justify-content: space-between;
  box-shadow: 0 0 4px 2px #ccc;
  border-radius: 5px;
  padding: 20px;
  margin-bottom: 20px;
  align-items: center;
}
</style>
